<template>

    <div ref="container">
        <div v-for="(item, index) in message.pages" :key="index" :id="'img'+(index + 1)" class="picture-container">
            <img :src="item.media.fileServer + '/static/' + item.media.path" class="img" @click="showOpt(index+1)">
        </div>
    </div>

    <div class="btn-container" v-show="isShowNextBtn" style="z-index: 0">
        <van-button color="linear-gradient(to right, #f5b1b8, #f1929d)" @click="showNext">加载更多</van-button>
    </div>

    <div v-show="isShowOptBtn">
        <div class="slider-container"></div>
        <div class="slider-box">
            <div class="slider-number">{{ message.nowRead }}</div>
            <div class="slider">
                <van-slider style="top: 20px;"
                            @change="goAnchor('#img'+message.nowRead)"
                            v-model="message.nowRead"
                            :min="1"
                            :max="message.limit"
                            active-color="#f1929d"/>
            </div>
            <div class="slider-number">{{ message.limit }}</div>
        </div>
        <div class="bottom-btn-box" style="z-index: 1;">
            <div class="bottom-btn">上一章</div>
            <div style="height: 100%; width: 0.3%; background-color: white"></div>
            <div class="bottom-btn">选择章节</div>
            <div style="height: 100%; width: 0.3%; background-color: white"></div>
            <div class="bottom-btn">下一章</div>
        </div>
    </div>


    <div style="height: 40px; background-color: grey"></div>

    <van-overlay v-model:show="showToast">
        <loading-box>转呀转呀转呀转...</loading-box>
    </van-overlay>
</template>

<script>
import {computed, onActivated, onMounted, reactive, ref} from "vue";
import {useRoute} from 'vue-router'
import {_getPicture} from "@/apis/comicAPI";

export default {
    name: "comicPicture",
    setup() {

        let route = useRoute()
        let book_id = route.query.book_id;
        let ep_id = route.query.ep_id;
        let index = 1;
        let isShowNextBtn = ref(true)
        let isShowOptBtn = ref(true)
        let showToast = ref(true)
        let value = ref(30)

        let message = reactive({
            pages: [{media: {fileServer: '', path: ''}}],
            nowRead: 1,
            total: '',
            limit: ''
        })

        /*
        * 计算现在共有多少页
        * */
        let nowPage = computed(() => {
            return message.limit
        })

        /*
        * 得到初始的第一章漫画
        * */
        async function getPicture() {
            showToast.value = true
            const data = {
                book_id: book_id,
                ep_id: ep_id,
                page: index
            }
            await _getPicture(data, res => {
                message.pages = res.data.data.pages.docs
                message.total = res.data.data.pages.total
                message.limit = res.data.data.pages.docs.length
                message.nowRead = 1
                if (nowPage.value >= message.total) {
                    isShowNextBtn.value = false
                }
                console.log(res.data)
                index++
                showToast.value = false
            }, () => {
                alert("加载失败")
                showToast.value = false
            })

        }


        onMounted(() => {
            getPicture()
        })

        onActivated(() => {
            let newBookId = route.query.book_id;
            let newEpid = route.query.ep_id;
            if (newBookId != book_id || newEpid != ep_id) {
                book_id = newBookId;
                ep_id = newEpid;
                getPicture()
            }
        })

        /*
        * 展示下一部分漫画
        * */
        async function showNext() {
            showToast.value = true
            const data = {
                book_id: book_id,
                ep_id: ep_id,
                page: index
            }
            await _getPicture(data, res => {
                console.log(res.data)
                for (let item of res.data.data.pages.docs) {
                    message.pages.push(item)
                }
                message.limit += res.data.data.pages.docs.length
                if (nowPage.value >= message.total) {
                    isShowNextBtn.value = false
                }
                showToast.value = false
            }, () => {
                alert("加载失败")
                showToast.value = false
            })
            index++
        }

        /*
        * 当单击漫画图片的时候展示操作框，以及将nowRead赋予正确的值
        * */
        function showOpt(value) {
            message.nowRead = value
            isShowOptBtn.value = !isShowOptBtn.value
        }


        return {
            message,
            isShowNextBtn,
            isShowOptBtn,
            showToast,
            showOpt,
            showNext,
            value
        }
    },
    methods: {
        setContainer() {
            let width = document.documentElement.clientWidth;
            this.$refs.container.style.width = width + 'px';
        },

        goAnchor(selector) {/*参数selector是id选择器（#anchor14）*/
            document.querySelector(selector).scrollIntoView({
                behavior: "smooth"
            });
        },
    },
    mounted() {
        this.setContainer()

    }
}
</script>

<style scoped>
.picture-container {
    background-color: grey;
    height: auto;
}

.img {
    width: 100%;
    height: auto;
    border: none;
    margin: 0;
    padding: 0;
}

.btn-container {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: grey
}

.slider-container {
    position: fixed;
    bottom: 0;
    background-color: black;
    opacity: 0.5;
    width: 100%;
    height: 80px;
}

.slider-box {
    position: fixed;
    display: flex;
    bottom: 40px;
    width: 100%;
    height: 40px;
}

.slider-number {
    position: relative;
    width: 15%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.slider {
    position: relative;
    display: flex;
    width: 70%;
    height: 100%;
}

.bottom-btn-box {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 40px;
    display: flex;
}

.bottom-btn {
    width: 33%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bolder;
}
</style>